<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<style>
			/* 尺寸问题：屏幕宽高比不一致，限定一个宽高范围
			min-width属性：最小宽度[√]   min-height属性：最小高度
		    max-width属性：最大宽度[√]   max-height属性：最小高度
			*/
		   div{
			   width: 80%;/*默认宽度*/
		       min-width: 500px;/*内容最小宽度是500px,不能改变*/
			   max-width: 600px;/*页面尺寸：最小是500px,最大是600px，默认80% */
			   /*定好最小跟最大宽高，PC：80%  300px
			                      移动：500~600宽度【页面不变】   300px
								  自适应
				*/				  
			   height: 300px;
			   background: #00ffff;
		   }
		   /*html结构      外层div--.container   内层div--.box   写lorem
		   *css结构      .container样式：背景颜色#f0f0f0;
		    *                          padding:20px;
			*                          文本居中
			*            .box样式：背景颜色#4caf50;
			*                    文字改下颜色：白色
			*                  宽度60%
			*                  宽度范围：500~600px[页面不变]
			*                  margin：auto；
			*/
		  div{
			  width: 60%;
			  min-width: 500px;
			  max-width: 600px;
			  margin: auto;
			  background: #4caf50;
		  }
		  
		</style>
	</head>
	<body>
		<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ratione necessitatibus et quibusdam eveniet quam doloremque placeat omnis laborum, architecto, asperiores eius at sapiente amet voluptates nulla aliquid dolores soluta!</div>
        <div></div>
    </body>
</html>